<template>
  <div class="min-h-screen bg-gray-100 py-8 px-4">
    <div class="max-w-2xl mx-auto">
      <h1 class="text-3xl font-bold text-center mb-6">数据库列表</h1>
新建数据库：http://localhost:5173/database/createdatabase  <br>
切换数据库：http://localhost:5173/database/switchdatabase
      <div v-if="loading" class="flex justify-center items-center py-8">
        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
      </div>

      <div v-else>
        <div v-if="error" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6">
          <p>{{ error }}</p>
        </div>

        <ul v-if="databases.length > 0" class="space-y-3">
          <li v-for="(db, index) in databases" :key="index"
              class="bg-white shadow-md rounded-lg p-4 hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-center">
              <span class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 mr-3">
                {{ index + 1 }}
              </span>
              <span class="font-medium text-gray-800">{{ db }}</span>
            </div>
          </li>
        </ul>

        <div v-else class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
          <p class="text-yellow-800">暂无数据库信息。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const loading = ref(true);
const error = ref<string | null>(null);
const databases = ref<string[]>([]);

onMounted(async () => {
  try {
    const response = await fetch('http://localhost:8080/db/list');
    if (!response.ok) {
      throw new Error('网络响应失败');
    }
    databases.value = await response.json() as string[];
  } catch (err) {
    if (err instanceof Error) {
      error.value = err.message;
    } else {
      error.value = '加载数据库列表时出错';
    }
  } finally {
    loading.value = false;
  }
});
</script>


<style scoped>
/* 页面背景和居中 */
.min-h-screen {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0f7fa, #e8eaf6);
  padding: 2rem 1rem;
  display: flex;
  align-items: flex-start; /* 稍微靠上 */
  justify-content: center;
}

/* 最大宽度的容器 */
.max-w-2xl {
  max-width: 40rem;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  margin-top: 40px;
  transition: transform 0.2s ease;
}

.max-w-2xl:hover {
  transform: translateY(-3px);
}

/* 标题 */
h1 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

/* 链接提示 */
.max-w-2xl > a, .max-w-2xl > div {
  font-size: 0.875rem;
  color: #555;
}

/* 加载动画 */
.animate-spin {
  border-top-color: #42a5f5;
  border-bottom-color: #42a5f5;
}

/* 错误提示 */
.bg-red-100 {
  background-color: #fee2e2;
  border-left: 4px solid #f87171;
  color: #b91c1c;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.375rem;
}

/* 空列表提示 */
.bg-yellow-50 {
  background-color: #fef9c3;
  border-left: 4px solid #facc15;
  color: #92400e;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-top: 1rem;
}

/* 数据库项 */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: box-shadow 0.3s ease;
}

li:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 左边的序号圆圈 */
li .w-8 {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dbeafe;
  color: #2563eb;
  border-radius: 50%;
  margin-right: 0.75rem;
  font-weight: 600;
}
</style>
